<template>
  <div class="containers">
    <div class="container">
      <!-- 中间的总数据 -->
      <div class="totalData">
        <div class="totalList" v-for="(lin, index) in dataList" :key="index">
          <div class="totaName">
            <p class="pt">{{ lin.name }}</p>
            <p class="po">{{ modeList[lin.value] }}</p>
          </div>
          <div class="totaImg">
            <img :src="lin.img" />
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <div class="iconList">
        <div class="frstchar">
          <div style="padding:15px;width: 100%;height: 100%;">
            <div id="maychar"></div>
          </div>
        </div>
      </div>

      <div class="iconList" style="display: flex; justify-content: space-between;">
        <div class="frstchar" style="width: 49.5%;">
          <div style="padding:15px;width: 100%;height: 100%;">
            <div id="maycharCash"></div>
          </div>
        </div>
        <div class="frstchar" style="width: 49.5%;">
          <div style="padding:15px;width: 100%;height: 100%;">
            <div id="maycharScan"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { name: '平台商家余额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610092487.png', id: 2,value:'money'},
        { name: '订单总金额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 5 ,value:"totalOrderMoney"},
        { name: '订单总补贴券', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610122919.png', id: 6 ,value:'jfTalOrderMoney'},
        { name: '订单总微信支付', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610080632.png', id: 8 ,value:'WxTotalOrderMoney'},
        { name: '订单总支付宝支付', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610092487.png', id: 9 ,value:'AlTotalOrderMoney'},
        { name: '银行卡订单总金额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610102231.png', id: 10 ,value:'YlTotalOrderMoney'},
        { name: '商家提现总金额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610112471.png', id: 11 ,value:"totalBusinessCashMoney"},
        // { name: '商家提现总金额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 12 },
        { name: '消费券支付订单', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 5 ,value:"yeTotalOrderMoney"},
        { name: '扫码支付总金额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 5 ,value:"totalScanMoney"},
        { name: '绿色积分', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 5 ,value:"green"},
        { name: '资产积分', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 5 ,value:"asset"},
      ],

      yeTotalOrderMoney: '',     //余额总共
      totDate: [],
      modeList: {},
      id: ''
    };
  },
  created() {
    this.id = this.$route.query.ID
  },
  mounted() {
    this.getData()
  },
  watch: {
    // 监听路由参数的变化
    $route: {
      immediate: true, // 启用初始化监听
      handler(newVal, oldVal) {
        // 当路由参数变化时，这里会被调用
        // 你可以在这里根据新的参数执行你的逻辑
        // this.getData();
      }
    }
  },
  methods: {
    // 使用柱形图，关于其他配置可以去官网查看
    getCharts() {
      const chartBox = this.$echarts.init(document.getElementById("maychar"));
      // 第一个
      const option = {
        title: {
          text: '成交统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['余额', '支付宝', '微信', '银联', '订单']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.totDate
          }
        ],
        yAxis: [
          {
            type: 'value'
            }
        ],
        series: [
          {
            name: '余额',
            type: 'line',
            stack: 'Total',
            smooth: true,
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.modeList.yeOrderMoneyList
          },
          {
            name: '微信',
            type: 'line',
            stack: 'Total',
            smooth: true,
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.modeList.WxOrderMoneyList
          },
          {
            name: '支付宝',
            type: 'line',
            stack: 'Total',
            smooth: true,
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.modeList.AlOrderMoneyList
          },
          {
            name: '银联',
            type: 'line',
            stack: 'Total',
            smooth: true,
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.modeList.YlOrderMoneyList
          },
          {
            name: '订单',
            type: 'line',
            stack: 'Total',
            smooth: true,
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.modeList.orderMoneyList
          }
        ]
      };
      chartBox.setOption(option);

      // 创建提现图表
      const chartBoxCash = this.$echarts.init(document.getElementById("maycharCash"));
      const optionCash = {
        title: {
          text: '提现统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['提现']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.totDate
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '提现',
            type: 'line',
            stack: 'Total',
            smooth: true,
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.modeList.cashBusinessRecordList
          }
        ]
      };
      chartBoxCash.setOption(optionCash);

      // 创建扫码图表
      const chartBoxScan = this.$echarts.init(document.getElementById("maycharScan"));
      const optionScan = {
        title: {
          text: '扫码统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['扫码']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.totDate
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '扫码',
            type: 'line',
            stack: 'Total',
            smooth: true,
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.modeList.scanList
          }
        ]
      };
      chartBoxScan.setOption(optionScan);

      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
        chartBoxCash.resize();
        chartBoxScan.resize();
      });
    },

    // 获取数据
    getData() {
      if (this.$route.query.ID) {
        this.request('admin/selfAnalysis/', 'get', { business_id: this.$route.query.ID }).then(res => {
          if (res.errno == 0) {
            this.totDate = res.data.timeLst
            this.modeList = res.data
            this.getCharts();
          }
        })
      } else {
        this.request('admin/selfAnalysis/', 'get', {}).then(res => {
          if (res.errno == 0) {
            this.totDate = res.data.timeLst
            this.modeList = res.data
            this.getCharts();
          }
        })
      }
    }
  },
};
</script>
<style scoped>
.container {
  background-color: #f5f7fe;
  padding: 10px;
}

.content {
  width: 100%;
}

.screen {
  display: flex;
}

.screen>p {
  font-weight: 700;
  font-size: 30px;
  color: #333333;
  margin: 20px 0;
}

.totalData {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.totalList {
  width: 24%;
  background-color: #fff;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 25px;
  border-radius: 10px;
}

.totaName {
  display: flex;
  flex-direction: column;
}

.pt {
  font-size: 10px;
  font-family: Source Han Sans SC, Source Han Sans SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #999999;
}

.po {
  font-size: 18px;
  font-family: Source Han Sans SC, Source Han Sans SC-Bold;
  font-weight: 700;
  text-align: left;
  color: #000000;
}

.totaImg {}

.totaImg>img {
  width: 70px;
  height: 71px;
}

.iconList {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.frstchar {
  width: 100%;
  height: 300px;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 15px;
}

.lastchar {
  width: 39.5%;
  height: 300px;
  background-color: #fff;
  border-radius: 10px;
}

#maychar {
  width: 100%;
  height: 100%;
}

#maycharCash {
  width: 100%;
  height: 100%;
}

#maycharScan {
  width: 100%;
  height: 100%;
}

#maycharen {
  width: 100%;
  height: 100%;
}

.columnar {
  margin-top: 15px;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-between;
}

.lopop {
  width: 49.5%;
  height: 100%;
  background-color: #fff;
}

#maycharenl {
  width: 100%;
  height: 100%;
}

#maycharenmode {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .containers {
    padding: 0;
  }

  .totalData {
    display: flex;
    flex-direction: column;
  }

  .totalList {
    width: 100%;
  }

  .iconList {
    display: flex;
    flex-direction: column;
  }

  .frstchar {
    width: 100%;
  }

  .lastchar {
    width: 100%;
    height: 400px;
  }

  .columnar {
    display: flex;
    flex-direction: column;
    height: 600px;
  }

  .lopop {
    width: 100%;
  }
}
</style>
